<template>
    <div class="select_brand">
        <el-dialog :model-value="show" title="选择商品" style="width: 40%;" @close="IcloseDialogFn(false)">
            <div class="search">
                <el-input v-model="paramsToSend.keyword" style="width: 250px;" placeholder="商品名称搜索">
                    <template #append>
                        <el-button :icon="Search" @click="fetch1" />
                    </template>
                </el-input>
            </div>
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" border
                :cell-style="{ textAlign: 'center', height: '48px' }"
                :header-cell-style="{ textAlign: 'center', height: '48px' }" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="商品名称" width="439">
                    <template #default="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column label="货号">
                    <template #default="{ row }">
                        NO.{{ row.productSn }}
                    </template>
                </el-table-column>
                <el-table-column label="价格">
                    <template #default="{ row }">
                        ￥{{ row.price }}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination v-model:current-page="pageNum1" v-model:page-size="pageSize1" background
                    layout="prev, pager, next" :total="total1" style="float: right;" default />
            </div>
            <div class="cancel_sure">
                <el-button type="primary" style="float: right;margin-left: 10px;" @click="addHomeBrand">确定</el-button>
                <el-button style="float: right;" @click="IcloseDialogFn(false)">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, watch } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { ApiProductList, ApiCretateRecommendProduct } from '@/http/api'
import useTable from '@/hooks/useTable';
// @ts-ignore
import { ElMessage, ElMessageBox } from 'element-plus'

// 创建自定义事件，给父组件控制该组件的显示隐藏
const emit = defineEmits(['close'])
const show = ref(false)
defineExpose({ show })
// 通知父组件给show设置未false
const IcloseDialogFn = (isReload: boolean) => {
    emit('close', isReload)
}

// 请求的参数
const searchParams = {
    keyword: '',
    pageSize: 5
}

// useTalbe返回的分页相关参数
const pageParams = reactive({
    pageNum1: 1,
    pageSize1: 5,
    total1: 0,
})

let paramsToSend = reactive({ ...searchParams }) // 先复制一份，以免影响到原有数据
// 避免传递空数据
Object.keys(paramsToSend).forEach((key) => {
    const k = key as keyof typeof searchParams; // 进行类型断言，指定 key 的类型为 "endTime"、"name"、"type" 或 "pageSize"
    if (paramsToSend[k] === '') {
        delete paramsToSend[k];
    }
});


let { pageNum1, pageSize1, total1 } = toRefs(pageParams)




let tableData = ref<any[]>([])
let fetch1 = () => { }

const multipleSelection = ref<any[]>([])
const handleSelectionChange = (val: any[]) => {
    multipleSelection.value = val.map(item => {
        return { productId: item.id, productName: item.name }
    })

}


const addHomeBrand = () => {
    if (multipleSelection.value.length == 0) {
        ElMessage({
            type: 'warning',
            message: '请一条记录'
        })
        return;
    }
    ElMessageBox.confirm('使用要进行添加操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        ApiCretateRecommendProduct(multipleSelection.value).then(res => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '添加成功'
                })
                show.value = false
                fetch1()
            }
        })
    }).catch(() => { })

}

watch(show, (newVal) => {
    if (newVal) {
        console.log(1111);
        const { list, pageNum, pageSize, total, fetch } = useTable(ApiProductList, paramsToSend)
        tableData = list
        fetch1 = fetch
        pageNum1 = pageNum
        pageSize1 = pageSize
        total1 = total
    }
})

</script>

<style scoped lang="less">
.select_brand {

    .search,
    .el-table {
        margin-bottom: 20px;
    }


    .pagination {
        height: 32px;
        margin-bottom: 40px;
    }

    .cancel_sure {
        height: 32px;
    }
}
</style>